<template>
  <el-link
    type="primary"
    :underline="false"
    @click="onClick"
    class="search-input-expland"
    :style="{ visibility: visibility }"
  >
    <template v-if="searchInputExpland">
      {{ t("common.collectButton") }} <el-icon><arrow-up /></el-icon>
    </template>
    <template v-if="!searchInputExpland">
      {{ t("common.explandButton") }} <el-icon><arrow-down /></el-icon>
    </template>
  </el-link>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
// 展开收缩
const searchInputExpland = ref(false);

// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    visibility: string;
  }>(),
  {
    // 隐藏并占位 hidden
    visibility: "inherit",
  }
);

const emit = defineEmits<{
  (event: "on-expland-change", searchInputExpland: boolean): void;
}>();

const onClick = () => {
  searchInputExpland.value = !searchInputExpland.value;
  emit("on-expland-change", searchInputExpland.value);
};
</script>
<style scoped>
.search-input-expland {
  margin-left: 10px;
}
</style>
